<template>
  <div>
    <a-form-model
      ref="formModel"
      :model="form"
      class="search-form"
      layout="inline"
      :rules="formRules"
    >
    <div class="search-box-end">
      <!-- <a-form-model-item
        class="search-item"
        prop="serviceName"
        label="出错的模块名称"
      >
        <a-input
          autocomplete="off"
          v-model="form.serviceName"
          :allowClear="false"
        ></a-input>
      </a-form-model-item> -->

      <a-form-model-item
        class="search-item"
        prop="type"
        label="错误类型"
      >
        <a-select
          :getPopupContainer="
          triggerNode => {
            return triggerNode.parentNode || document.body;
          }"
          style="min-width: 120px;"
          v-model="form.type"
        >
          <a-select-option
            v-for="(d, i) in errorTypeMap"
            :key="d.key + '_' + i"
            :value="d.key"
          >{{ d.label }}</a-select-option>
        </a-select>
      </a-form-model-item>

      <div style="line-height: 40px;" class="search-item">
        <a-button
          type="primary"
          @click="loadData(true)"
          icon="search"
          style="margin-left: 12px"
        >查询</a-button>
        <a-button
          @click="resetSearchForm"
          icon="reload"
          style="margin-left: 12px"
        >重置</a-button>
      </div>
    </div>
    </a-form-model>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>

      <a-tooltip
        slot="remark"
        slot-scope="text"
        placement="topLeft"
        :title="text"
      >
        <span>{{ text }}</span>
      </a-tooltip>
      <a-tooltip
        slot="module"
        slot-scope="text"
        placement="topLeft"
        :title="text"
      >
        <span>{{ text }}</span>
      </a-tooltip>
    </a-table>
  </div>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { getAction } from "@/api/manage";

  export default {
    name: "ErrorLog",
    mixins: [GwListMixin],
    data() {
      return {
        // 表头
        columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "错误时间",
          width: 100,
          dataIndex: "createTime",
        },
        {
          title: "错误类型",
          width: 80,
          dataIndex: "operateTypeName",
        },
        {
          title: "出错的模块名称",
          width: 200,
          dataIndex: "module",
          ellipsis: true,
          scopedSlots: { customRender: 'module' }
        },
        {
          title: "错误明细",
          dataIndex: "remark",
          width: 300,
          ellipsis: true,
          scopedSlots: { customRender: 'remark' }
        }, ],
        formRules: {
          serviceName: [{
            validator: this.validators.noWhitespace(),
            trigger: 'change'
          },
          {
            validator: this.validators.noIllegalString(),
            trigger: 'change'
          },
          {
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'change'
          }, ],
        },
        errorTypeMap: [{ key: '', label: '全部' }],
        form: {
          type: '',
          serviceName: "",
        },
      };
    },
    mounted() {
      this.loadData()
      this.loadErrorTypeList()
    },
    methods: {
      loadData(isDoSearch) {
        this.$refs.formModel.validate(error => {
          if (!error) { return }
          this.gQueryParam.logContent = this.form.serviceName
          this.gQueryParam.operateType = this.form.type
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1
            this.gPagination.current = 1
          }
          this.gQueryParam.logType = [4]
          this.gQueryParam.title = '错误日志'
          getAction('/sys/log/list', this.gQueryParam).then((res) => {
            if (res.success) {
              this.gDataSource = res.result.records
              this.gPagination.total = res.result.total
            }
          })
        })
      },
      loadErrorTypeList() {
        this.errorTypeMap = [{ key: '', label: '全部' }]
        const postData = {
          logType: 4,
          title: "系统管理-易分析日志-错误日志"
        }

        getAction('/sys/log/operate_type_list', postData).then((res) => {
          if (res.success) {
            this.errorTypeMap = this.errorTypeMap.concat(res.result.map(item => {
              return {
                key: item.value,
                label: item.name,
              }
            }))
          }
        })
      },
      resetSearchForm() {
        this.form.type = ''
        this.form.serviceName = ""
        this.$refs.formModel.resetFields()
      },
    },
  };
</script>

<style lang="less" scoped>
  .search-form {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    .search-box-end {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      .search-item{
        padding-left: 16px ;
        margin: 0 0 16px 0;
      }
    }
  }
  /deep/ .ant-form-inline .ant-form-item {
    margin: 0;
  }
</style>
